﻿@page

@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Http.Features
@using Microsoft.AspNetCore.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using System.Net.Http


@model PatModel
@{
    ViewData["Title"] = ViewData["Pat"];
    ViewData["ActivePage"] = ManageNavPages.Pat;
}

<h4>@ViewData["Title"]</h4>
<partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row">
    <div class="col-md-6">
        <a id="add" asp-page="PatCreate" class="btn btn-primary">@ViewData["Add"]</a>
        <form asp-page="PatDelete" method="get" style="display: inline">
            <button class="btn btn-danger">@ViewData["Delete"]</button>
            <input type="hidden" id="selected" name="id" value="" />
        </form>
    </div>
</div>
<table id="patTable" class="table table-striped">
    <thead>
        <tr>
            <th style="display:table-cell; width:40%">@ViewData["Name"]</th>
            <th style="display:table-cell; width:30%">@ViewData["CreationTime"]</th>
            <th style="display:table-cell; width:30%">@ViewData["Expiration"]</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var it in Model.Tokens)
        {
            <tr id="@it.Id" onclick="pageController.selectRow(this)">
                <td>@it.Name</td>
                <td>@it.CreationTime</td>
                <td>@it.Expiration</td>
            </tr>
        }
    </tbody>
</table>
@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        'use strict';
        var selectedRow;
        let pageController = (function() {
            // Select the new row and un-select the old one.
            function selectRow(row) {
                if (selectedRow) {
                    $(selectedRow).toggleClass("table-info");
                }
                $(row).toggleClass("table-info");
                selectedRow = row;
                document.getElementById("selected").value = row.id;
            }
            // Public Functions
            return {
                "selectRow": selectRow
            }
        })();
    </script>
}